<template>
  <div class="wxstatistics-list">
    <div class="dailyanalytics-title dailyanalytics-title-bg">
      <span class="chart-title-icon"></span>
      <span class="chart-title-name">{{$route.params.title.substring(0, $route.params.title.length-2)}}明细 </span>
    </div>

    <!-- :loading="isloading" -->
    <Table
      :loading="isloading"
      stripe
      ref="rowSpanTable"
      border
      :columns="Tablecolumns"
      :data="resData"
    ></Table>
    <div class="page-box" style="margin-top: 20px">
      <Page
        :total="total"
        ref="pages"
        :current.sync='searchObj.pageIndex'
        :page-size="searchObj.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>
<script>
// import { rowSpanTable, formatRowspanData } from '@/libs/rowspan'
import { shopcoincertificateList, shopcoincertificatePkgList } from '@/api/report/shop'
import errorCaptured from '@/libs/errorCaptured'
import { formatAmount } from '@/libs/tools'
import dayjs from 'dayjs'
import { cloneObj } from '@/libs/cloneObj'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'report_shop_coincertificate_detail',
  data () {
    return {
      shopList: [],
      total: 0,
      isloading: false,
      bottonActive: 1,
      searchObj: {
        offset: 0,
        limit: 10,
        pageIndex: 1,
        start: new Date(),
        shopId: this.$store.state.user.orgId
      },
      dateOption: {
        disabledDate (date) {
          return dayjs(date).isAfter(dayjs(new Date()))
        }
      },
      model10: [],
      type: [
        // 套餐类型
        { value: 0, label: '购币套餐' },
        { value: 1, label: '办卡套餐' },
        { value: 2, label: '水吧套餐' },
        { value: 4, label: '促销套餐' }
      ],
      columns: [
        { title: '消费时间', key: 'createTime', align: 'center', headerAlign: 'center' },
        { title: '兑换券名称', key: 'couponName', align: 'center', headerAlign: 'center' },
        { title: '兑币数量', key: 'couponSum', align: 'center', headerAlign: 'center' },
        { title: '兑换张数', key: 'couponCount', align: 'center', headerAlign: 'center' },
        { title: '操作人', key: 'operatorName', align: 'center', headerAlign: 'center' }
      ],
      // 套餐明细
      columns1: [
        { title: '消费时间', key: 'createTime', align: 'center', headerAlign: 'center' },
        { title: '会员编号', key: 'memberId', align: 'center', headerAlign: 'center' },
        { title: '会员姓名', key: 'memberName', align: 'center', headerAlign: 'center' },
        { title: '消费金额',
          key: 'payAmount',
          align: 'center',
          headerAlign: 'center',
          render: (h, params) => {
            return h('span', formatAmount(params.row.payAmount))
          }
        },
        { title: '购买数量', key: 'buyCoinSum', align: 'center', headerAlign: 'center' },
        { title: '赠送数量', key: 'giveCoinSum', align: 'center', headerAlign: 'center' },
        { title: '套餐类型', key: 'pkgType', align: 'center', headerAlign: 'center' },
        { title: '操作人', key: 'operatorName', align: 'center', headerAlign: 'center' }
      ],
      resData: []
    }
  },
  computed: {
    startDate () {
      if (!this.searchObj.start) return ''
      return dayjs(this.searchObj.start)
        .set('hour', 0)
        .set('minute', 0)
        .set('second', 0)
        .add(1, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
    },
    endDate () {
      if (!this.searchObj.start) return ''
      return dayjs(this.searchObj.dateTimes)
        .add(1, 'month')
        .set('hour', 0)
        .set('minute', 0)
        .set('second', 0)
        .format('YYYY-MM-DD HH:mm:ss')
    },
    ...mapState({
      tagNavList: state => state.app.tagNavList
    }),
    Tablecolumns () {
      if (this.$route.params.title === '兑换券统计') {
        return this.columns
      } else {
        return this.columns1
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 设置面包屑导航 tagNavList
      let tagNavList = cloneObj(vm.tagNavList)
      tagNavList.forEach(item => {
        if (item.name === vm.$route.name) {
          item.meta.title = vm.$route.params.title + '明细'
        }
      })
      vm.setTagNavList([...tagNavList])
    })
  },
  async created () {
    this.shopcoincertificateList()
  },
  mounted () {

  },
  methods: {
    ...mapMutations({
      setTagNavList: 'setTagNavList'
    }),
    maxTagPlaceholder (num) {
      return '...'
    },

    // 改变页数
    handlePage (val) {
      this.searchObj.offset = (val - 1) * this.searchObj.limit
      this.shopcoincertificateList()
    },
    // 分页大小
    handlePageSize (val) {
      this.searchObj.limit = val
      this.searchObj.offset = 0
      this.searchObj.pageIndex = 1
      this.shopcoincertificateList()
    },
    // 兑换券明细查询
    async shopcoincertificateList () {
      let paramsdata = this.$route.params
      let params = {
        merchantId: this.$store.state.user.merchantId,
        shopId: paramsdata.shopId,
        startDate: paramsdata.startDate,
        endDate: paramsdata.endDate,
        pkgId: paramsdata.id,

        offset: this.searchObj.offset,
        limit: this.searchObj.limit
      }
      this.isloading = true

      let [err, res] = await errorCaptured(
        paramsdata.title === '兑换券统计' ? shopcoincertificateList : shopcoincertificatePkgList,
        params
      )

      this.isloading = false
      if (err) return
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      this.resData = res.data.data || []
      this.total = res.data.totalCount
    },
    // 套餐明细查询

    search () {
      this.searchObj.pageIndex = 1
      this.searchObj.offset = 0
      this.shopcoincertificateList()
    }
  }
}
</script>
<style lang="less" scoped>
.wxstatistics-list {
  .from {
    margin-top: 24px;
  }
  .coinrevenue-list-edit {
    padding-left: 20px;
  }
  .button_active {
    border: 1px solid #2d8cf0;
  }
  .dailyanalytics-title-bg {
    background: #f8f8f9;
    .chart-title-icon {
      margin-left: 40px;
    }
  }
  .dailyanalytics-title {
    height: 80px;
    line-height: 80px;
    width: 100%;
    .chart-title-icon {
      display: inline-block;
      width: 8px;
      height: 20px;
      background: #2d8cf0;
      vertical-align: middle;
    }
    .chart-title-name {
      display: inline-block;
      font-size: 14px;
      color: #464c5b;
      letter-spacing: 0;
      text-align: justify;
      margin-left: 10px;
      vertical-align: middle;
    }
  }
}
</style>
